import React, { Component } from "react";
import { Checkbox, Button } from 'antd';

export default class Footer extends Component {

    handleCheckAll = (event) => {
        const {checkAll} = this.props
        checkAll(event.target.checked)
    }

    render() {
        const {todos, deleteCheck} = this.props
        // 已完成个数
        const selectNumber = todos.reduce((pre, todo) => {
            return pre + (todo.done ? 1 : 0)
        }, 0)
        // 总数
        const allNumber = todos.length
        return (
            <div className="footer">
                <div>
                  <Checkbox checked={selectNumber === allNumber && allNumber !==0 ? true : false} onChange={this.handleCheckAll}>已完成{selectNumber}/全部{allNumber}</Checkbox>
                </div>
                <Button onClick={deleteCheck}>删除已完成任务</Button>
            </div>
        )
    }
}